<template>
  <div class="singer-detail">
      <music-list :title="title" :avatar="bgImg" :songsList="songsList" />
  </div>
</template>

<script>
import MusicList from '../musicList/MusicList'
import { mapGetters } from 'vuex'
import { getSingerDetail } from '../../network/singer'
import { createSong } from '../../assets/js/song'
import { ERR_OK } from '../../network/config'
export default {
  name: 'singerDetail',
  data () {
    return {
      songsList: []
    }
  },
  computed: {
    title () {
      return this.singer.name
    },
    bgImg () {
      return this.singer.avatar
    },
    ...mapGetters(['singer'])
  },
  created () {
    this._getSingerDetail()
  },
  components: {
    MusicList
  },
  methods: {
    _getSingerDetail () {
      getSingerDetail(this.singer).then(res => {
        if (res.code === ERR_OK) {
          this._normalizeSongs(res.data.list)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    _normalizeSongs (list) {
      this.songsList = list.reduce((pre, cur) => {
        pre.push(createSong(cur.musicData))
        return pre
      }, [])
    }
  }
}

</script>
<style lang='stylus' scoped>
</style>
